<template>
	<view class="pageview flex flex-direction">
		<view class="flex-sub main">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="list">
					<u-swipe-action>
						<u-swipe-action-item @click="delDevice" :options="options" v-for="(item, index) in list" :key="item.deviceId" :name="item.deviceId">
							<view class="swipe-action item">
								<view class="swipe-action__content">
									<view class="flex align-center" @tap="navTo(item)">
										<view class="imgbox">
											<image v-if="item.imgDeviceTypeUrl" :src="filterUrl + item.imgDeviceTypeUrl.split(';')[0]" mode="widthFix"></image>
										</view>
										<view class="flex-sub">
											<view class="name">{{ item.devName }}</view>
											<view>{{ item.devType }}</view>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</mescroll-uni>
		</view>
		<view class="footerbar">
			<u-button type="primary" text="添加设备" shape="circle" @click="addDevice"></u-button>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations } from 'vuex';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			downOption: {
				auto: true // 不自动加载
			},
			upOption: {
				auto: true // 不自动加载
			},
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: 'rgb(245, 108, 108)'
					}
				}
			],
			list: [],
			isInit: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.isInit && this.mescroll && this.mescroll.resetUpScroll();
		this.isInit = true;
	},
	methods: {
		...mapMutations(['$uStore']),
		upCallback() {
			this.getDeviceList();
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		getDeviceList() {
			this.$postAction(this.$deviceapi.getDeviceList, {
				userId: this.userInfo.userId
			}).then(da => {
				this.list = da;
				/* 保存设备信息 */
				this.$uStore({
					name: 'devicelist',
					value: da
				});
				this.mescroll.endSuccess(this.list.length, false);
			});
		},
		navTo(device) {
			let path = '';
			switch (device.deviceTypeCode) {
				case 'O2Max':
				case 'O2Ring': {
					path = '/pages/device/o2device';
					break;
				}
				case 'BP2A': {
					path = '/pages/device/bp2device';
					break;
				}
				case 'F2Pro': {
					path = '/pages/device/f2device';
					break;
				}
				case 'ER': {
					path = '/pages/device/erdevice';
					break;
				}
			}
			if (path) {
				this.$Router.push({
					path: path + '?deviceType=' + device.deviceTypeCode + '&deviceMac=' + device.mac
				});
			}
		},
		addDevice() {
			this.$Router.push({
				path: '/pages/device/device'
			});
		},
		delDevice(info) {
			console.log('info', info);
			this.$postAction(this.$deviceapi.delDevice + '?id=' + info.name).then(da => {
				this.mescroll.resetUpScroll();
			});
		}
	}
};
</script>

<style scoped lang="scss">
page,
.pageview {
	height: 100%;
	width: 100%;
	background: #f7f7fc;
	box-sizing: border-box;
	.main {
		min-height: 0;
		overflow: auto;
	}
}

.list {
	padding: 20upx;
	/deep/ .u-swipe-action-item {
		background: #fff;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
		margin-bottom: 20upx;
		border-radius: 20upx;
	}
	.item {
		padding: 20upx 30upx;
		color: #666;
		.name {
			color: #333;
			font-size: 30upx;
			margin-bottom: 10upx;
		}
		.imgbox {
			width: 140upx;
			height: 140upx;
			margin-right: 20upx;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.footerbar {
	padding: 30upx 60upx;
	background: #fff;
}
</style>
